<template>
  <div id="" class="page paT55">
    <div class="rightContent">
      <router-view/>
    </div>
  </div>
</template>

<script>
import Corner from '../../../components/corner'
export default {
  name: 'resource',
  components: {
    Corner
  }
}
</script>
<style lang="less" scoped>
  .page{
    height: 100vh;
    display: flex;
    padding-left: 2%;
    padding-right: 2%;
    box-sizing: border-box;
  }
  .leftNaV{
    box-sizing: border-box;
    margin-top: 1.5%;
    color: #FFFFFF;
    /*font-size: 2rem;*/
    width: 13%;
    min-width: 240px;
    background: rgba(24, 32, 45, 0.2);
    /*background-color: red;*/
    height: calc(100vh - 190px);
    display: flex;
    justify-content: center;
    border:1px solid rgba(0,245,255,0.5);
    position: relative;
    & /deep/ .cornerTopLeft{
      left: -2px;
      top: -2px;
    }
    & /deep/ .cornerTopRight{
      top: -2px;
      right: -2px;
    }
    & /deep/ .cornerBottomLeft{
      bottom: -2px;
      left: -2px;
    }
    & /deep/ .cornerBottomRight{
      bottom: -2px;
      right: -2px;
    }
    /*align-items: center;*/
    ul{
      margin-top: 9%;
      width: 80%;
    }
    li{
      cursor: pointer;
      font-size: 2rem;
      text-align: left;
      /*background-color: pink;*/
      padding: 15px 15%;
      margin-bottom: 15px;
      /*padding-top: 15px;*/
      /*padding-bottom: 15px;*/
      /*padding-left: 25%;*/
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      &.active{
        box-shadow: inset 0 0 15px rgba(0,245,255,1);
      }
      img{
        margin-right: 10px;
      }
    }
  }
  .rightContent{
    margin-top: 1.5%;
    font-size: 2.2rem;
    // margin-left: 2%;
    width: 100%;
    /*background-color: palevioletred;*/
    height: calc(100vh - 250px);
  }
</style>
